<template>
  <el-card shadow="never" class="portal-eChart-box">
    <CardHeader
      v-if="activeData.title"
      slot="header"
      :title="activeData.title"
      :card="activeData.card"
    />
    <div class="eChart-box-body">
      <div ref="chart" id="chart" v-if="chartData"></div>
      <div class="portal-common-noData portal-common-noData-eChart" v-else>
        <img
          src="@/assets/images/portal-nodata.png"
          alt=""
          class="noData-img"
        />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>

<script>
import { deepClone } from "@/utils";
import CardHeader from "../CardHeader";
import * as echarts from "echarts";
import { chartData } from "@/components/VisualPortal/PortalDesign/components/data";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
export default {
  components: { CardHeader },
  name: "HCustomEcharts",
  props: {
    activeData: { type: Object, default: () => {} }
  },
  data() {
    return {
      chartData: {}
    };
  },
  watch: {
    "activeData.propsApi": {
      handler(val,oldVal) {
        if(!val) return
        if(oldVal!==val) this.chart.dispose()
        getDataInterfaceRes(val).then(res => {
          this.chartData = res.data;
          this.initCustomChart();
        });
      },
      deep: true
    },
    "activeData.dataType": {
      handler(val) {
        if (val == "static") {
          this.chartData = chartData.customEchartsData;
          this.initCustomChart();
          return
        }
        if(!this.activeData.propsApi){
          this.chart.dispose()
        }
      },
      deep: true
    }
  },
  computed: {},
  created() {},
  mounted() {
    // 初始化图表
    if (this.activeData.dataType === "dynamic") {
      if (!this.activeData.propsApi) return (this.chartData = {});
      getDataInterfaceRes(this.activeData.propsApi).then(res => {
        this.chartData = res.data;
        this.initCustomChart();
      });
    } else {
      setTimeout(() => {
        this.chartData = this.activeData.option;
        this.initCustomChart();
      }, 0);
    }
  },
  methods: {
    initCustomChart() {
      try {
        this.chart = echarts.init(this.$refs.chart);
        this.chart.setOption(this.chartData);
      } catch (error) {}
    }
  }
};
</script>
